Questions
7 of 12
1How can we embed audio in HTML?
2How can we embed video in HTML?
3What tags are used to embed videos and audios?
4What is the controls attribute?
5What is the <source> tag used for?
6How do you make media fallback for unsupported browsers?
7<iframe>, <embed>, <object>?
8Responsive images: srcset, picture?
9What is an <iframe> used for?
10What are the security concerns with <iframe>?
11Difference between <iframe> and <embed>?
12What does the sandbox attribute do?
HTMLHTML
Basics
Common Tags
Attributes and Elements
Lists
Text tags and Formatting
Input and Forms
Block and Inline Elements
Box model
Semantic Tags
Links and Images
Media and Embeds
Tables
HTML entities
HTML and CSS
Performance
SEO
Progressive Enhancement
HTML5
Custom Elements & Web Components
HTML5 APIs
SPAs
WCAG
Security
Best Practices
07 / 12

<iframe>, <embed>, <object>?

Understanding <iframe>, <embed>, and <object>

HTML provides several elements for embedding external or non-HTML content into a page. The most common ones are <iframe>, <embed>, and <object>. While they may seem similar, each has a different purpose and typical use case.

Key Differences
  1. 1

    <iframe> (Inline Frame): Used to embed another HTML document inside the current page (e.g., embedding YouTube videos, maps, or another website). It loads an entire web page within a rectangular frame.

  2. 2

    <embed>: A void element (no closing tag) used to embed external resources, usually multimedia like PDFs, audio, or Flash (historically). It’s simple but less flexible than <object>.

  3. 3

    <object>: A more general-purpose embedding element. It can embed images, videos, PDFs, or even another HTML page. Unlike <embed>, it supports fallback content inside its tags if the resource can’t be loaded.

Example Usage

In short: Use <iframe> to embed full web pages, <embed> for simple external resources, and <object> when you need embedding with fallback content.